<template>
	<view>
		<view class="gg-box" @click="handleOpenBulletinPopup">
			<view class="gg-tips">{{ $t('bulletin.bulletin', 'Bulletin') }}</view>
		</view>

		<!-- 公告弹窗 -->
		<uni-popup ref="bulletinPopup" type="center">
			<view class="pup-box model-content">
				<view class="close-img" @click="closeBulletinPopup" />
				<view class="title">{{ $t('bulletin.bulletin', 'Bulletin') }}</view>
				<view class="contents">
					<template v-if="isViewContent">
						<view class="ra-text">{{ currentTitle }}</view>
						<view class="ra-title" v-html="currentContent"></view>
					</template>
					<template v-else>
						<template v-if="articles.length === 0">
							<view class="no-data">
								<image class="img" src="/static/img/wralog-no.png" />
								<view class="no-text">{{ $t('bulletin.no_records', 'No records') }}</view>
							</view>
						</template>
						<template v-else>
							<view class="lists" v-for="item in articles" :key="item.article_id" @click="handleViewContent(item)">
								<view class="names-top flex-lr">
									<view>{{ item.title }}</view>
									<image class="rights" src="/static/img/arrow-right.png" mode="aspectFill"></image>
								</view>
								<!-- <view class="ra-title">{{ item.content }}</view> -->
							</view>
						</template>
					</template>
				</view>
				<template v-if="isViewContent">
					<view class="flex-l return-text" @click="handleBack">
						<image class="img" style="transform: rotate(180deg);" src="/static/img/arrow-right.png" mode="aspectFit" />
						<view class="text">{{ $t('bulletin.back', 'Back') }}</view>
					</view>
				</template>
				<template v-else>
					<view v-if="articles.length > 0" class="flex-center page-box">
						<view class="page-list flex-center">
							<image class="list-page" src="/static/img/arrow-prev-page.png" mode="aspectFit"
								style="width: 28px;" @click="handlePrevPage"></image>
							<view class="sum flex-center" :class="{ active: currentPage === 1 }">{{ currentPage }}</view>
							<image class="list-page" src="/static/img/arrow-next-page.png" mode="aspectFit"
								style="width: 28px;" @click="handleNextPage"></image>
						</view>
					</view>
				</template>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { systemApi } from '@/request/system.js'
import { mapState } from 'vuex'
import { languageMixin } from '@/utils/language-mixin.js'

export default {
	mixins: [languageMixin],
	name: 'BulletinBox',
	data() {
		return {
			articles: [],
			currentPage: 1,
			pageSize: 20,
			isViewContent: false,
			currentTitle: '',
			currentContent: '',
			totalPages: 0,
		}
	},
	computed: {
		...mapState('user', ['friendHomeMode'])
	},
	methods: {
		async handleOpenBulletinPopup() {
			if (!this.friendHomeMode) {
				this.$refs.bulletinPopup.open();
				this.fetchArticles()
			}
		},
		async fetchArticles() {
			try {
				const res = await systemApi.getArticleList({ type: 0, page: this.currentPage, limit: this.pageSize })
				if (res && res.code === 200 && Array.isArray(res.rows)) {
					this.articles = res.rows
					this.totalPages = Math.ceil(res.total / this.pageSize)
				}
			} catch (e) {
				console.error('Failed to get bulletin', e)
			}
		},
		// 关闭公告弹窗
		closeBulletinPopup() {
			this.currentContent = ''
			this.currentTitle = ''
			this.isViewContent = false
			this.$refs.bulletinPopup.close();
		},
		handleViewContent(item) {
			this.currentTitle = item.title
			this.currentContent = item.content
			this.isViewContent = true
		},
		handlePrevPage() {
			if (this.currentPage > 1) {
				this.currentPage--
			}
			this.fetchArticles()
		},
		handleNextPage() {
			if (this.currentPage < this.totalPages) {
				this.currentPage++
			}
			this.fetchArticles()
		},
		handleBack() {
			this.isViewContent = false
			this.currentContent = ''
			this.currentTitle = ''
		}
	}
}
</script>

<style scoped lang="scss">
.gg-box {
	position: absolute;
	top: 78px;
	right: 98px;
	z-index: 90;
	width: 94px;
	height: 107px;
	background: url(/static/img/bulletin.png) no-repeat;
	background-size: 100% 100%;

	.gg-tips {
		width: 78px;
		height: 43px;
	}
}

.pup-box {
	background: url(/static/img/bg12.png) no-repeat;
	background-size: 100%;
	width: 335px;
	padding-top: 5px;
	height: 499px;
	position: relative;

	.close-img {
		width: 51px;
		height: 51px;
		position: absolute;
		top: 0;
		right: 0;
		cursor: pointer;
	}

	.title {
		margin-top: 15px;
		font-size: 20px;
		color: #b8752b;
		text-align: center;
		font-weight: 700;
	}

	.contents {
		width: 100%;
		height: 395px;
		padding-top: 2px;
		margin-top: 0;
		overflow: auto;
		padding: 10px 17px;
		box-sizing: border-box;

		.lists {
			width: 100%;
			border-bottom: 1px solid rgba(0, 74, 127, 0.1);
			padding: 10px 0;
			box-sizing: border-box;
			color: #3b713a;
			font-size: 17px;
			font-weight: 700;

			.names-top {
				width: 100%;
				color: #885625;
				font-size: 16px;
				flex-wrap: wrap;
				font-weight: 700;
				margin-bottom: 7px;

				.status {
					color: #4292ff;
					margin-left: 4px;
					margin-right: 4px;
				}
			}

			.rights {
				min-width: 7px;
				width: 7px;
				height: 12px;
				margin-left: 4px;
			}
		}

		.ra-text {
			color: #3b713a;
			font-size: 17px;
			font-weight: 700;
			margin-bottom: 12px;
			text-align: left;
			margin-top: 10px;
		}

		.ra-title {
			color: #679166;
			font-size: 14px;
			font-weight: 700;
			line-height: 18px;
			text-align: left;

			ul {
				padding-left: 41px;
			}
		}

		.no-data {
			margin-top: 83px;
			width: 100%;
			text-align: center;
			box-sizing: border-box;
			position: relative;
			z-index: 10;

			.img {
				width: 81px;
				height: 84px;
				text-align: center;
			}

			.no-text {
				color: #a27b6e;
				font-size: 15px;
				font-weight: 700;
				margin-top: 12px;
			}
		}
	}

	.page-box {
		margin-top: 10px;

		.page-list {
			margin-bottom: 14px;
			width: 100%;

			.list-page {
				width: 29px;
				height: 31px;
				margin: 0 6px;
			}

			.sum {
				color: #58934e;
				font-size: 15px;
				font-weight: 700;
				margin: 0 4px;

				&.active {
					color: #ecee30;
				}
			}
		}
	}

	.return-text {
		color: #3b713a;
		font-size: 17px;
		font-weight: 700;
		margin-top: 10px;

		.img {
			width: 7px;
			height: 12px;
			margin-right: 7px;
		}
	}
}
</style>